<div>
  <div class="health-top">实例健康状态</div>
  <div class="search-div">
    <div nz-row class="content-top">
      <div class="health-input" nz-col nzSpan="8">
        <span>起止时间：</span>
        <nz-range-picker
          [nzShowTime]="{ nzFormat: 'HH:mm' }" style="vertical-align: bottom;"
          nzFormat="yyyy-MM-dd HH:mm" [(ngModel)]="dateRange"
          (nzOnOk)="timeOk()"></nz-range-picker>
      </div>
      <div nz-col nzSpan="5">
        <span>地域：</span>
        <nz-select style="width: calc(100% - 50px);" nzShowSearch [(ngModel)]="region" nzPlaceHolder="请选择地域">
<!--          <nz-option nzLabel="全地域" nzValue="">全地域</nz-option>-->
          <nz-option *ngFor="let region of allRegionsData"
                     [nzLabel]="$any(region).LocalName"
                     [nzValue]="$any(region).RegionId">
            {{$any(region).LocalName}}
          </nz-option>
        </nz-select>
      </div>
      <div nz-col nzSpan="4">
        <button nz-button nzType="primary" (click)="search()">搜索</button>
        <button nz-button nzType="default" (click)="reset()">重置</button>
      </div>
    </div>
  </div>

  <div opsCard [dynamicShadow]="true" class="card-div">
    <div class="health-panel">
      <nz-spin [nzSpinning]="(pieChartData | async).spinning">
        <div echarts [options]="eventHealthPieChart" [merge]="(pieChartData | async).options" [autoResize]="true"
             style="width: 100%; height: 300px;"></div>
      </nz-spin>
      <nz-spin [nzSpinning]="(histogramChartData | async).spinning">
        <div echarts [options]="healthStatusHistogramChart" [merge]="(histogramChartData | async).options" [autoResize]="true"
             style="width: 100%; height: 300px"></div>
      </nz-spin>
    </div>
  </div>

  <div opsCard [dynamicShadow]="true" class="card-div">
    <ng-container *ngIf="healthStatusData | async as tableData">
      <nz-table #basicTable
                [nzData]="tableData.dataList"
                [nzLoading]="tableData.spinning"
                [nzTotal]="tableData.total"
                [nzShowTotal]="totalTemplate"
                [nzPageIndex]="pageIndex"
                [nzPageSize]="pageSize"
                [nzFrontPagination]="true"
                nzShowPagination
      >
        <thead>
        <tr>
          <th nzAlign="center" nzWidth="300px">实例 ID</th>
          <th nzAlign="center"
              [nzFilters]="instanceStatusFilter"
              [nzFilterFn]="dataFilters.statusFilter">实例状态</th>
          <th nzAlign="center"
              [nzFilters]="instanceHealthStatusFilter"
              [nzFilterFn]="dataFilters.healthStatusFilter">实例健康状态</th>
          <th nzAlign="center"
              [nzFilters]="instanceRegionFilter"
              [nzFilterFn]="dataFilters.regionFilter">地域</th>
        </tr>
        </thead>
        <tbody>
        <ng-container *ngFor="let data of basicTable.data">
          <tr>
            <td nzAlign="center">
              {{ data['instanceId'] }}
            </td>
            <td nzAlign="center">
               <span *ngIf="data.status === 'Running'" style="color: #39A503;" nz-icon
                     nzType="check-circle" nzTheme="outline"></span>
              <span *ngIf="data.status !== 'Running'" style="color: #F9C757;" nz-icon
                    nzType="exclamation-circle" nzTheme="outline"></span>
              {{ GlobalConstant.INSTANCE_STATUS_MAP[data['status']] || data['status'] }}
            </td>
            <td nzAlign="center">
              <ng-container>
               <span *ngIf="data['healthStatus'] === 'Ok'" style="color: #39A503;" nz-icon
                           nzType="check-circle" nzTheme="outline"></span>
                <span *ngIf="data['healthStatus'] === 'InsufficientData'" style="color: #F9C757;" nz-icon
                      nzType="exclamation-circle" nzTheme="outline"></span>
                <span *ngIf="data['healthStatus'] === 'Impaired'" style="color: #FF0000;" nz-icon
                      nzType="close-circle" nzTheme="outline"></span>
                <span *ngIf="data['healthStatus'] === 'Initializing'" style="color: #0070cc;" nz-icon
                      nzType="info-circle" nzTheme="outline"></span>
                <span *ngIf="data['healthStatus'] === 'NotApplicable'" style="color: #F9C757;" nz-icon
                      nzType="question-circle" nzTheme="outline"></span>
              </ng-container>
              {{ GlobalConstant.HEALTH_STATUS_MAP[data['healthStatus']] || data['healthStatus'] }}
            </td>
            <td nzAlign="center">
              {{ getRegionName(data['regionId']) }}
            </td>
          </tr>
        </ng-container>
        </tbody>
        <ng-template #totalTemplate> 共 {{ tableData.total }} 条</ng-template>
      </nz-table>
    </ng-container>
  </div>
</div>


